/** Slider */
var Slider = new Class({
	initialize: function(slider,args){
		slider = $(slider);
		this.ul = slider.getElement("ul");
		this.aLis = this.ul.getElements("li");
		this.liSize = this.aLis.getSize();
		
		this.linkImgZoom = slider.getElement("div.bigImg").getElement("a.imgZoom");
		//on calcule la taille totale d'un li (marges comprises) puis la taille de tous les li mis bout a bout
		//et on applique cette valeur a la propriete "width" du ul
		var totalW = this.aLis[0].offsetWidth + this.aLis[0].getStyle("marginLeft").toInt() + this.aLis[0].getStyle("marginRight").toInt();
		this.ulWidth = Browser.Engine.trident && Browser.Engine.version == 4 ? totalW*this.aLis.length+3 : totalW*this.aLis.length;
		this.ul.setStyle("width", this.ulWidth);
		
		//on calcul la taille du masque en fonction du nombre de li a afficher passe en parametre
		//et on applique cette valeur a la propriete "width" du masque
		this.maskSlider = slider.getElement("div.maskSlider");
		var maskSize = Browser.Engine.trident && Browser.Engine.version == 4 ? args[0]*totalW+3 : args[0]*totalW;
		this.maskSlider.setStyle("width",maskSize);
		this.maskSlider.setStyle("marginLeft","auto");
		this.maskSlider.setStyle("marginRight","auto");
		
		//on calcule la marge maximum que pourra avoir le ul afin de ne pas la depasser
		var maxMarginL = 0 - (this.ulWidth - maskSize);
		
		this.slidePrev = slider.getElement("a.btnPrev");
		this.slideNext = slider.getElement("a.btnNext");
		
		//a l'ouverture de la page on cache les boutons prev et next
		this.slidePrev.addClass("inactive");
		this.slideNext.addClass("inactive");
		
		//on recupere le nom de la miniature
		var src = "/img/mobiles/";
		var myArray = [];
		var as = slider.getElements("ul a");
		as.addEvent('click', function (e){
			e.stop();
		})
		
		this.aLis.each(function(li,i){
			var thumb = li.getElement("img");
			var srcThumb = thumb.getProperty("src");
			var thumbName = srcThumb.substring(srcThumb.lastIndexOf("/")+1);
			var prefixeImg = thumbName.substring(0, thumbName.length-11);
			var suffixeImg = thumbName.substring(thumbName.lastIndexOf("_"));
			
			myArray.push(as[i].getProperty("rel"));
			
			li.addEvent("mouseover", function(e){
				slider.getElement("div.bigImg").getElement("img").setProperty("src",myArray[i]);
				if(_self.linkImgZoom != null){
					_self.linkImgZoom.setProperty("href", myArray[i]);
					_self.linkImgZoom.setProperty("index", i);
				}
				
				li.getAllPrevious("li").removeClass("current");
				li.getAllNext("li").removeClass("current");
				li.addClass("current");
			});
		});	
		
		var myImagesMedium = new Asset.image(myArray);
		
		
		var _self = this;
		
		//si la taille du ul est inferieur a la taille du masque, on laisse les bouton prev et next caches
		if(this.ulWidth < maskSize)
		{
			this.slidePrev.addClass("inactive");
			this.slideNext.addClass("inactive");
		}
		//si la taille du ul est superieur a la taille du masque
		//et la marge gauche est egale a 0 on cache uniquement le bouton next
		else if(this.ulWidth > maskSize && this.ul.getStyle("marginLeft") == "0px")
		{
			this.slideNext.removeClass("inactive");
		}
		
		
		//au click sur le bouton prev : slide vers la gauche
		this.slidePrev.addEvent("click", function(e){
			e.stop();
			if(_self.locked) return;
			var actualMarginL = _self.ul.getStyle("marginLeft").toInt();
			var setMarginL = actualMarginL + totalW;
			if(setMarginL > 0){
				_self.slidePrev.addClass("inactive");
			}else{
				if(_self.slideNext.hasClass("inactive")) _self.slideNext.removeClass("inactive");
				_self.slide(_self.ul,setMarginL,maxMarginL,_self.slidePrev);
			}
			return false;
		});
		
		
		//au click sur le bouton next : slide vers la droite
		this.slideNext.addEvent("click", function(e){
			e.stop();
			if(_self.locked) return;
			var actualMarginL = _self.ul.getStyle("marginLeft").toInt();
			var setMarginL = actualMarginL - totalW;
			if(setMarginL < maxMarginL){
				_self.slideNext.addClass("inactive");
			}else{
				//_self.ul.setStyle("marginLeft",setMarginL+"px");
				if(_self.slidePrev.hasClass("inactive")) _self.slidePrev.removeClass("inactive");
				_self.slide(_self.ul,setMarginL,maxMarginL,_self.slideNext);
			}
			return false;
		});
		
		
		if(this.linkImgZoom != null){
			this.linkImgZoom.addEvent("click", function(e){
				e.stop();
				var url = this.href;
				var mobileSlider = $('mobileSlider');
				mobileSlider.getElement("div.bigImg").getElement("img").setProperty("src",url);
				mobileSlider.getElements("li").each(function (i, li){})
				new FogManager('mobileSlider');
			});
		}
	},
	
	
	slide: function(element, value, maxMarginL, slideArrow){
		var _self = this;
		var myFx = new Fx.Tween(element, {
			onComplete: function(){
				_self.locked = false;
				if(element.getStyle("marginLeft") == maxMarginL+"px" || element.getStyle("marginLeft") == "0px")
				{
					$(slideArrow).addClass("inactive");
				}
			},
			onStart: function(){
				_self.locked = true;
			}
		});
		myFx.start("marginLeft", value+"px");
	}
});
Moodule.register("Slider","div.slider", ["4", "MEDIUM"]);
Moodule.register("Slider","div.sliderLarge", ["4", "LARGE"]);